<template>
    <div class="info-container">
        <div class="info-header">
            <h4 class="info-title">{{ photoInfo.title }}</h4>
            <p>
                <span>发表时间：{{ photoInfo.add_time | dateFormat }}</span>
                <span>点击：{{ photoInfo.click }}次</span>
            </p>
        </div>
        <hr>

        <vue-preview class="info-imgBox"
                :list="list"
                :thumbImageStyle="{width: '80px', height: '80px', margin: '10px'}"
                :previewBoxStyle="{border: '1px solid #eee'}"
                :tapToClose="true"
        />

        <div class="info-content" v-html="photoInfo.content"></div>

        <!-- 评论子组件 -->
        <cmt-box :id="id"></cmt-box>
    </div>
</template>

<script>
    import {Toast} from 'mint-ui'
    import Comment from '../../../../components/content/comment/comment.vue'

    export default {
        name: "",
        data() {
            return {
                id: this.$route.params.id,
                photoInfo: {}, //图片详情
                list: []
            }
        },
        created() {
            this.getPhotoInfo()
            this.getThumbs()
        },
        methods: {
            getPhotoInfo() {
                this.$http.get('static/data/photoInfo.json').then(res => {
                    if (res.body.status === 0) {
                        var ret = res.body.message.find(item => item.id === parseInt(this.id))

                        if (ret === undefined) {
                            return Toast('数据获取失败')
                        }
                        this.photoInfo = ret
                    }
                })
            },
            getThumbs() { //获取缩略图
                this.$http.get('static/data/thumimages.json').then(res => {
                    if (res.body.status === 0) {
                        // console.log(res);
                        var ret = res.body.message.find(item => item.id === parseInt(this.id))
                        if (!ret) {
                            Toast('图片获取失败')
                            return
                        }

                        // 循环每个图片数据，补全图片的宽和高
                        ret.images.forEach(item => {
                            item.w = 600
                            item.h = 400
                        })
                        this.list = ret.images

                        console.log(this.list);
                    }
                })
            }
        },
        components: {
            "cmt-box": Comment
        }
    }
</script>

<style lang="less" scoped>
    .info-container {
        padding: 6px;
        .info-header {
            .info-title {
                text-align: center;
                font-size: 17px;
                color: #2aabd2;
                margin: 10px 0 0;
            }
            p {
                margin: 14px 0 0;
                padding: 0 4px;
                display: flex;
                justify-content: space-between;
            }
        }
    }

</style>